<!DOCTYPE HTML>
<html data-use-rem="750">
<head>
    <title>流程记录档案</title>
    <meta charset="utf-8">
    <meta name="aplus-terminal" content="1">
    <meta name="apple-mobile-web-app-title" content="">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no, address=no">
    <!-- 样式 -->
    <link rel="stylesheet" type="text/css" href="/static/info/css/swiper.css" />
    <link rel="stylesheet" type="text/css" href="/static/info/css/style.css" />
</head>
<body class="skin">
	<img src="/static/info/images/templateInfo.png" onclick="originItemProcessRecordTemplateInfo()" class="hover-pointer" style="position:fixed;z-index:99999;width: 45px;height:50px;top:3px;left:0;right:0;margin:auto">
    <div class="tree-container">
        <div class="item-tree">
			<!-- <div class="branch">
				<div class="branch-date" onclick="showDiv('0')">  
					<p style='width:100%;overflow: hidden; text-overflow:ellipsis;white-space:nowrap;'>花芽形态分化期</p>
						<p style="width:120%;overflow: hidden; text-overflow:ellipsis;white-space:nowrap;-webkit-transform:scale(0.8);-moz-transform:scale(0.8);transform:scale(0.8);margin-left:-10%">2017/10/31-2017/11/29</p>
						<img src="/Uploads/JPG/20180404/花芽形态分化期_636584494776143249.jpg" />
				</div>
			</div> -->
		</div>
		<img src="/static/info/images/tree-footer.png" onclick="getQRCodeInfo()" class="tree-footer hover-pointer" style="top: 17.6rem; width: 90%; left: 5%;">
	</div>
	<div style="height: 0px; width: 1rem;"></div>
	<!-- 脚本 -->
	<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="/static/info/js/swiper.min.js"></script>
    <script src="/static/info/js/rem.js"></script>
    <script  th:inline="javascript">
    	var itemProcessRecord = [[${itemProcessRecord}]];
    	var itemProcessRecordInfos = [[${itemProcessRecordInfos}]];
    	var getQRCodeInfo = function(){
    		if(itemProcessRecord.normalQRCode!=null){
    			//溯源二维码
    			var rootPath = window.location.href.split("//")[0]+"//"+window.location.href.split("//")[1].split("/")[0];
    			window.location.href = rootPath+'/getNormalQrCodeInfoByItemProcess?id='+itemProcessRecord.normalQRCode.id+'&itemProcessId='+itemProcessRecord.itemProcess.id;
    		}
    	};
    	var originItemProcessRecordTemplateInfo = function(){
   			var rootPath = window.location.href.split("//")[0]+"//"+window.location.href.split("//")[1].split("/")[0];
   			window.location.href = rootPath+'/originItemProcessRecordTemplateInfo_html?itemProcessRecordId='+itemProcessRecord.id;
    	};
        $(function () {
            //初始化页面高度
            var itemTree = $('.item-tree');
            for(var i=0;i<itemProcessRecordInfos.length;i++){
            	var urls = itemProcessRecordInfos[i].urls;
            	if(urls == null || urls.length == 0)
            		continue;
            	var urlArray = urls.split('#');
            	for(var j=0;j<urlArray.length;j++){
	            	itemTree.append(
		            '<div class="branch">'+
						'<div class="branch-date" > '+
							'<p style="width:100%;overflow: hidden; text-overflow:ellipsis;white-space:nowrap;">'+itemProcessRecordInfos[i].title+'</p>'+
								'<p style="width:120%;overflow: hidden; text-overflow:ellipsis;white-space:nowrap;-webkit-transform:scale(0.8);-moz-transform:scale(0.8);transform:scale(0.8);margin-left:-10%">'+itemProcessRecordInfos[i].description+'</p>'+
								'<img src="'+urlArray[j]+'" />'+
						'</div>'+
					'</div>');
            	}
            }
            var winH = $(window).height();
            $(".skin").css("height", winH + "px");
            $(".item-tree .branch").each(function () {

                var dex = $(this).index() + 1;
    			var  ht1 = 3.6 + (dex - 1) *1.6;
                var ht2 = 4.2 + ((dex/2)-1) * 3.2;
                var wid1 = (42 + dex * 0.75) + "%";
                var wid2 = (42 + (dex - 1) * 0.7) + "%";
                var zIndex = 1200;
                $(".item-tree").css("height", ht1 + "rem");
                $(".tree-footer").css({ "top": ht1 + "rem", "width": "90%", "left": "5%" });
                if (wid2 >= "50%") {
                    wid2 = "49.5%";
                };
                if (wid1 >= "50%") {
                    wid1 = "50%";
                };

                if ((dex % 2) == 1) {
                  var  zlevel = zIndex - dex * 2;
    		    
                    $(this).css({
                        "width": wid2,
                        "height": ht1 + "rem",
                        "right": "1%",
                        "position": "absolute",
                        "bottom": "0",
                        "borderLeft": "3px solid #00bab4",
                        "borderTop": "3px solid #00bab4",
                        "-webkit-border-top-left-radius": "30px",
                        "-moz-border-top-left-radius": "30px",
                        "border-top-left-radius": "30px",
                        "zIndex": zlevel
                    });
                };

                if ((dex % 2) == 0) {
                 var  zlevel = zIndex - (dex - 1) * 2;
                    $(this).css({
                        "width": wid1,
                        "height": ht2 + "rem",
                        "left": "1%",
                        "position": "absolute",
                        "bottom": "0",
                        "borderRight": "3px solid #00bab4",
                        "borderTop": "3px solid #00bab4",
                        "-webkit-border-top-right-radius": "30px",
                        "-moz-border-top-right-radius": "30px",
                        "border-top-right-radius": "30px",
                        "zIndex": zlevel
                    });
                };

            })
        })

    </script>
</body>

</html>
